<template>
    <div class="page" data-page="reportApplyChoice" style="z-index: 2;">
        <div class="link-page-nav">
            <a href="#" class="link" @click="$root.backToTab()"> 
                <i class="iconfont icon-zuo"></i> 
            </a>
        </div>
        <div class="link-page-top">
            <div class="link-page-title">报表</div>
        </div>
        <div class="page-content">
            <div class="reportApplyChoice-one-card reportApplyChoice-one-card-plat" @click="goToReport(0)">
                <div class="reportApplyChoice-one-card-title">平台报表</div>
                <div class="reportApplyChoice-one-card-bottom"><span id="reportApplyChoice_platNum">0</span>个报表</div>
            </div>
            <div class="reportApplyChoice-one-card reportApplyChoice-one-card-unit" @click="goToReport(1)">
                <div class="reportApplyChoice-one-card-title">单位报表</div>
                <div class="reportApplyChoice-one-card-bottom"><span id="reportApplyChoice_unitNum">0</span>个报表</div>
            </div>
        </div>
    </div>
</template>
<script>
    return {
        data: function () {
            return {
                platIds:''
            }
        },
        methods: {
            getData(){
                var self = this;
                $('#reportApplyChoice_platNum,#reportApplyChoice_unitNum').html(0);
                Dao.getSubplatform({
                   id: userInfor.org.id
                },function (platIds) {
                    self.platIds = platIds || ''
                    Dao.getClassifiedStatistics({
                        pid: platIds,
                        oid: userInfor.organizationIds
                    }, function (data) {
                        $('#reportApplyChoice_platNum').html(data.platTotal || 0)
                        $('#reportApplyChoice_unitNum').html(data.orgTotal || 0)
                    })
                })
            },
            goToReport(showSelect){
                var self = this;
                app.router.navigate('/reportApply/' + (showSelect?userInfor.organizationIds: self.platIds) + '/'+ showSelect+'/');
            }
        },
        on: {
            pageInit: function(e, page) {
                var self = this;
                this.getData();
            }
        }
    }
</script>
<style scoped>
   .reportApplyChoice-one-card{
    width: calc(100% - 40px);
    height: 180px;
    margin: 20px;
    border-radius: 8px;
    color: rgba(255,255,255,1);
    letter-spacing: 1px;
    position: relative;
    background-size: 100%;
    background-repeat: no-repeat;
   }
   .reportApplyChoice-one-card-plat{
    background-image: url(./img/apply/bg-reportApply-plat.png);
   }
   .reportApplyChoice-one-card-unit{
    background-image: url(./img/apply/bg-reportApply-unit.png);
   }
   .reportApplyChoice-one-card-title{
    position: absolute;
    top: 20px;
    left: 20px;
    font-size:24px;
    font-weight:500;
    color:rgba(255,255,255,1);
    line-height:35px;
   }
   .reportApplyChoice-one-card-bottom{    
    position: absolute;
    bottom: 20px;
    right: 20px;
    font-size:16px;
   }
</style>